<template>
  <div class="login-body">
    <div class="left">
      <p class="one"></p>
      <p class="two"></p>
      <p class="three"></p>
      <img src="../assets/images/login_blog.png" alt="">
    </div>
    <div class="right">
      <div class="title">绩效管理系统</div>
      <div class="login-card">
        <h1>账户登录</h1>
        <el-form :model="form" ref="form" :rules="rules" label-width="60px" :inline="float">
          <el-form-item label="账号：">
            <el-input prefix-icon v-model="ruleForm.user"></el-input>
          </el-form-item>

          <el-form-item label="密码：">
            <el-input v-model="ruleForm.passwd" size="normal" show-password="true"></el-input>
          </el-form-item>

          <el-form-item>
            <!-- el-checkbox-group -->
            <!-- <div style="width: 100%;">
              <el-checkbox v-model="主管" label="主管" size="large" />
              <el-checkbox v-model="员工" label="员工" size="large" />
            </div> -->



            <el-button type="primary" :oplan="true" @click="getLogin">登录</el-button>

          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  // import router from "@/router";
  // import { ref, onMounted } from "vue";
  // import axios from "axios";
  // import { ElMessage } from 'element-plus';

  import axios from "axios"
  import { reactive, ref, onMounted } from 'vue';
  import router from "@/router";
  import { FormInstance, FormRules } from 'element-plus';
  import { ElMessage } from 'element-plus';

  // 导入刚刚定义的Pinia状态管理器中的useUserStore仓库
  // import useUserStore from "@/store/login.js";
  // import {storeToRefs} from "pinia";
  import { useUser } from '@/stores/login'
  import { storeToRefs } from 'pinia'

  export default {
    name: 'LoginNav',
    setup() {
      // 创建变量接受
      const store = useUser();

      let { if_users } = storeToRefs(store)
      // let stores = storeToRefs(store);
      // const { increment } = store


      const ruleForm = reactive({
        type: [],
        user: null,
        passwd: null
      })


      let array01;
      let array02 = [];
      let array03 = []

      // 生命周期页面dom加载完成后
      onMounted(async () => {
        let url = "http://localhost:8080/users/"
        await axios.get(url)
          .then(function (response) {
            console.log("数据请求成功", response.data.data);
            array01 = response.data.data
            console.log("数组", array01[0].passwd);
            for (let index = 0; index < array01.length; index++) {
              // console.log(array01[index].useraccount);
              array02.push(array01[index].username);
              array03.push(array01[index].passwd);
            }

          })
          .catch(function (error) {
            console.log(error);
          })

        // 使用Pinia状态管理器
        // console.log("使用Pinia状态管理器");
        // console.log("登录", if_users.value);


      })

      // 返回复选框状态
      let checks = ref(false);
      // let checks = false;
      // let item = "成功"
      function if_tf() {
        // console.log(checked);
        // console.log(checks.value);
        if (checks.value === false) {
          checks.value = true;
        } else if (checks.value === true) {
          checks.value = false;
          // console.log(checks.value);
          // ElMessage.error('请阅读用户协议勾选后在登录！');
        }
      }


      // 登录方法
      function getLogin() {
        // 数组检索判断用户是否存在
        // 用户登录解决方法 https://blog.csdn.net/zinechina/article/details/124090598
        // console.log(array02);
        // console.log(array03);
        // console.log("用户账号是否存在：", array02.includes("root"));
        // console.log("用户密码是否存在：", array03.includes("123456"));

        if (array02.includes(ruleForm.user) === true && array03.includes(ruleForm.passwd) === true) {
          // console.log("成功");
          router.push("/main");
          // console.log("管理员登录成功！", ruleForm.user);

          let userName = reactive({
            name: ruleForm.user,
          });

          // console.log(userName.name);

          ElMessage({
            message: '用户登录成功！',
            type: 'success',
          })



          return if_users.value = userName;
        } else {
          ElMessage.error('用户登录失败，请检查账号或密码！');
          // return 0 = false;
        }
      }



      return {
        ruleForm,
        getLogin,
        // 返回出store仓库
        if_users,
        if_tf,
      }
    }
  }
</script>

<style scoped>
  .login-body {
    width: 100%;
    height: 100%;
    display: flex;
    /* border: 1px solid red; */
  }

  .login-body .left {
    width: 50%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
    overflow: hidden;
    background: #fff;
  }

  .login-body .right {
    width: 50%;
    /* border: 1px solid red; */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f3f8;
    position: relative;
  }

  .login-body .left .one,
  .two,
  .three {
    background: #51B37F;
    /* border: 1px solid red; */
    position: absolute;
    box-shadow: 10px 10px 25px #cccccc;
    z-index: 1;
  }

  .login-body .left .one {
    width: 600px;
    height: 600px;
    border-radius: 100%;
    top: -250px;
    left: -250px;
  }

  .login-body .left .two {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    z-index: 1;
    top: 50px;
    left: 400px;
  }

  .login-body .left .three {
    width: 700px;
    height: 700px;
    border-radius: 100%;
    bottom: -550px;
    left: 350px;
  }

  .login-body .left img {
    width: 450px;
    z-index: 0;
    margin-top: 100px;
    margin-left: 60px;
    /* border: 1px solid #51B37F; */
  }

  .login-body .right .login-card {
    width: 60%;
    height: 60%;
    display: flex;
    background: #fff;
    border-radius: 10px;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
  }

  .login-body .right .title {
    position: absolute;
    top: 5%;
    left: auto;
    font-size: 40px;
    font-weight: 600;
    /* color: #51B37F; */
  }

  .login-body .right .login-card h1 {
    font-size: 28px;
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .el-button {
    background: #51B37F;
    padding: 0 10px;
    border: none;
  }
</style>